<template>
    <div class="my-product">
        <h3>标题: {{ title }}</h3>
        <p>价格: {{ price }}元</p>
        <p>{{ info }}</p>
        <button @click="sub">是兄弟就来砍我</button>
    </div>
</template>
  
<script>
export default {
    // 使用 props 接收父组件传递的数据
    // 数组里面写字符串, 字符串就是父组件传递的属性名
    // 接收到数据后, 可以把它们当 data 中的数据来使用
    props:{
        title:{
            //必填项，必须传
            require:true,
            //类型，首字母大写
            type:String
        },
        price:{
            //必填项，必须传
            require:true,
            //类型，首字母大写
            type:Number
        },
        info:{
            //必填项，必须传
            // require:true,
            //类型，首字母大写
            type:String,
            //设置默认值，一般情况和require不会一起设置
        default:'非常好吃！我是默认值'
        },
    },
    methods: {
        sub() {
            // 单向数据流: 父组件传递给子组件的数据, 不能直接修改, 如果修改, 父组件收不到数据更新的通知
            // Vue 限制的这个功能
            // Vue 不允许在子组件中修改父组件传递的数据, 因为这样会导致数据操作混乱
            // this.price = this.price - Math.random()
            // 知道当前组件是谁?
            // 为什么要传给子组件 id? 
            // 最终目的: 子传父时, 要携带价格和 id 
            // console.log(this.id)
            // this.$emit() 触发事件, 同时可以传参
            // 参数1: 事件名
            // 参数2 ~ 参数N: 参数
            this.$emit('sayPrice', 3, this.id)
        }
    }
}
</script>
  
<style>
.my-product {
    width: 400px;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    margin: 10px;
}
</style>